/*! Responsive 2.2.7
 * 2014-2021 SpryMedia Ltd - datatables.net/license
 */

/**
 * @summary     Responsive
 * @description Responsive tables plug-in for DataTables
 * @version     2.2.7
 * @file        dataTables.responsive.js
 * @author      SpryMedia Ltd (www.sprymedia.co.uk)
 * @contact     www.sprymedia.co.uk/contact
 * @copyright   Copyright 2014-2021 SpryMedia Ltd.
 *
 * This source file is free software, available under the following license:
 *   MIT license - http://datatables.net/license/mit
 *
 * This source file is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
 * or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
 *
 * For details please refer to: http://www.datatables.net
 */
(function (factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(['jquery', 'datatables.net'], function ($) {
      return factory($, window, document);
    });
  } else if (typeof exports === 'object') {
    // CommonJS
    module.exports = function (root, $) {
      if (!root) {
        root = window;
      }

      if (!$ || !$.fn.dataTable) {
        $ = require('datatables.net')(root, $).$;
      }

      return factory($, root, root.document);
    };
  } else {
    // Browser
    factory(jQuery, window, document);
  }
}(function ($, window, document, undefined) {
  'use strict';
  var DataTable = $.fn.dataTable;


  /**
   * Responsive is a plug-in for the DataTables library that makes use of
   * DataTables' ability to change the visibility of columns, changing the
   * visibility of columns so the displayed columns fit into the table container.
   * The end result is that complex tables will be dynamically adjusted to fit
   * into the viewport, be it on a desktop, tablet or mobile browser.
   *
   * Responsive for DataTables has two modes of operation, which can used
   * individually or combined:
   *
   * * Class name based control - columns assigned class names that match the
   *   breakpoint logic can be shown / hidden as required for each breakpoint.
   * * Automatic control - columns are automatically hidden when there is no
   *   room left to display them. Columns removed from the right.
   *
   * In additional to column visibility control, Responsive also has built into
   * options to use DataTables' child row display to show / hide the information
   * from the table that has been hidden. There are also two modes of operation
   * for this child row display:
   *
   * * Inline - when the control element that the user can use to show / hide
   *   child rows is displayed inside the first column of the table.
   * * Column - where a whole column is dedicated to be the show / hide control.
   *
   * Initialisation of Responsive is performed by:
   *
   * * Adding the class `responsive` or `dt-responsive` to the table. In this case
   *   Responsive will automatically be initialised with the default configuration
   *   options when the DataTable is created.
   * * Using the `responsive` option in the DataTables configuration options. This
   *   can also be used to specify the configuration options, or simply set to
   *   `true` to use the defaults.
   *
   *  @class
   *  @param {object} settings DataTables settings object for the host table
   *  @param {object} [opts] Configuration options
   *  @requires jQuery 1.7+
   *  @requires DataTables 1.10.3+
   *
   *  @example
   *      $('#example').DataTable( {
   *        responsive: true
   *      } );
   *    } );
   */
  var Responsive = function (settings, opts) {
    // Sanity check that we are using DataTables 1.10 or newer
    if (!DataTable.versionCheck || !DataTable.versionCheck('1.10.10')) {
      throw 'DataTables Responsive requires DataTables 1.10.10 or newer';
    }

    this.s = {
      dt: new DataTable.Api(settings),
      columns: [],
      current: []
    };

    // Check if responsive has already been initialised on this table
    if (this.s.dt.settings()[0].responsive) {
      return;
    }

    // details is an object, but for simplicity the user can give it as a string
    // or a boolean
    if (opts && typeof opts.details === 'string') {
      opts.details = {type: opts.details};
    } else if (opts && opts.details === false) {
      opts.details = {type: false};
    } else if (opts && opts.details === true) {
      opts.details = {type: 'inline'};
    }

    this.c = $.extend(true, {}, Responsive.defaults, DataTable.defaults.responsive, opts);
    settings.responsive = this;
    this._constructor();
  };

  $.extend(Responsive.prototype, {
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * Constructor
     */

    /**
     * Initialise the Responsive instance
     *
     * @private
     */
    _constructor: function () {
      var that = this;
      var dt = this.s.dt;
      var dtPrivateSettings = dt.settings()[0];
      var oldWindowWidth = $(window).innerWidth();

      dt.settings()[0]._responsive = this;

      // Use DataTables' throttle function to avoid processor thrashing on
      // resize
      $(window).on('resize.dtr orientationchange.dtr', DataTable.util.throttle(function () {
        // iOS has a bug whereby resize can fire when only scrolling
        // See: http://stackoverflow.com/questions/8898412
        var width = $(window).innerWidth();

        if (width !== oldWindowWidth) {
          that._resize();
          oldWindowWidth = width;
        }
      }));

      // DataTables doesn't currently trigger an event when a row is added, so
      // we need to hook into its private API to enforce the hidden rows when
      // new data is added
      dtPrivateSettings.oApi._fnCallbackReg(dtPrivateSettings, 'aoRowCreatedCallback', function (tr, data, idx) {
        if ($.inArray(false, that.s.current) !== -1) {
          $('>td, >th', tr).each(function (i) {
            var idx = dt.column.index('toData', i);

            if (that.s.current[idx] === false) {
              $(this).css('display', 'none');
            }
          });
        }
      });

      // Destroy event handler
      dt.on('destroy.dtr', function () {
        dt.off('.dtr');
        $(dt.table().body()).off('.dtr');
        $(window).off('resize.dtr orientationchange.dtr');
        dt.cells('.dtr-control').nodes().to$().removeClass('dtr-control');

        // Restore the columns that we've hidden
        $.each(that.s.current, function (i, val) {
          if (val === false) {
            that._setColumnVis(i, true);
          }
        });
      });

      // Reorder the breakpoints array here in case they have been added out
      // of order
      this.c.breakpoints.sort(function (a, b) {
        return a.width < b.width ? 1 :
          a.width > b.width ? -1 : 0;
      });

      this._classLogic();
      this._resizeAuto();

      // Details handler
      var details = this.c.details;

      if (details.type !== false) {
        that._detailsInit();

        // DataTables will trigger this event on every column it shows and
        // hides individually
        dt.on('column-visibility.dtr', function () {
          // Use a small debounce to allow multiple columns to be set together
          if (that._timer) {
            clearTimeout(that._timer);
          }

          that._timer = setTimeout(function () {
            that._timer = null;

            that._classLogic();
            that._resizeAuto();
            that._resize(true);

            that._redrawChildren();
          }, 100);
        });

        // Redraw the details box on each draw which will happen if the data
        // has changed. This is used until DataTables implements a native
        // `updated` event for rows
        dt.on('draw.dtr', function () {
          that._redrawChildren();
        });

        $(dt.table().node()).addClass('dtr-' + details.type);
      }

      dt.on('column-reorder.dtr', function (e, settings, details) {
        that._classLogic();
        that._resizeAuto();
        that._resize(true);
      });

      // Change in column sizes means we need to calc
      dt.on('column-sizing.dtr', function () {
        that._resizeAuto();
        that._resize();
      });

      // On Ajax reload we want to reopen any child rows which are displayed
      // by responsive
      dt.on('preXhr.dtr', function () {
        var rowIds = [];
        dt.rows().every(function () {
          if (this.child.isShown()) {
            rowIds.push(this.id(true));
          }
        });

        dt.one('draw.dtr', function () {
          that._resizeAuto();
          that._resize();

          dt.rows(rowIds).every(function () {
            that._detailsDisplay(this, false);
          });
        });
      });

      dt
        .on('draw.dtr', function () {
          that._controlClass();
        })
        .on('init.dtr', function (e, settings, details) {
          if (e.namespace !== 'dt') {
            return;
          }

          that._resizeAuto();
          that._resize();

          // If columns were hidden, then DataTables needs to adjust the
          // column sizing
          if ($.inArray(false, that.s.current)) {
            dt.columns.adjust();
          }
        });

      // First pass - draw the table for the current viewport size
      this._resize();
    },


    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
     * Private methods
     */

    /**
     * Calculate the visibility for the columns in a table for a given
     * breakpoint. The result is pre-determined based on the class logic if
     * class names are used to control all columns, but the width of the table
     * is also used if there are columns which are to be automatically shown
     * and hidden.
     *
     * @param  {string} breakpoint Breakpoint name to use for the calculation
     * @return {array} Array of boolean values initiating the visibility of each
     *   column.
     *  @private
     */
    _columnsVisiblity: function (breakpoint) {
      var dt = this.s.dt;
      var columns = this.s.columns;
      var i, ien;

      // Create an array that defines the column ordering based first on the
      // column's priority, and secondly the column index. This allows the
      // columns to be removed from the right if the priority matches
      var order = columns
        .map(function (col, idx) {
          return {
            columnIdx: idx,
            priority: col.priority
          };
        })
        .sort(function (a, b) {
          if (a.priority !== b.priority) {
            return a.priority - b.priority;
          }
          return a.columnIdx - b.columnIdx;
        });

      // Class logic - determine which columns are in this breakpoint based
      // on the classes. If no class control (i.e. `auto`) then `-` is used
      // to indicate this to the rest of the function
      var display = $.map(columns, function (col, i) {
        if (dt.column(i).visible() === false) {
          return 'not-visible';
        }
        return col.auto && col.minWidth === null ?
          false :
          col.auto === true ?
            '-' :
            $.inArray(breakpoint, col.includeIn) !== -1;
      });

      // Auto column control - first pass: how much width is taken by the
      // ones that must be included from the non-auto columns
      var requiredWidth = 0;
      for (i = 0, ien = display.length; i < ien; i++) {
        if (display[i] === true) {
          requiredWidth += columns[i].minWidth;
        }
      }

      // Second pass, use up any remaining width for other columns. For
      // scrolling tables we need to subtract the width of the scrollbar. It
      // may not be requires which makes this sub-optimal, but it would
      // require another full redraw to make complete use of those extra few
      // pixels
      var scrolling = dt.settings()[0].oScroll;
      var bar = scrolling.sY || scrolling.sX ? scrolling.iBarWidth : 0;
      var widthAvailable = dt.table().container().offsetWidth - bar;
      var usedWidth = widthAvailable - requiredWidth;

      // Control column needs to always be included. This makes it sub-
      // optimal in terms of using the available with, but to stop layout
      // thrashing or overflow. Also we need to account for the control column
      // width first so we know how much width is available for the other
      // columns, since the control column might not be the first one shown
      for (i = 0, ien = display.length; i < ien; i++) {
        if (columns[i].control) {
          usedWidth -= columns[i].minWidth;
        }
      }

      // Allow columns to be shown (counting by priority and then right to
      // left) until we run out of room
      var empty = false;
      for (i = 0, ien = order.length; i < ien; i++) {
        var colIdx = order[i].columnIdx;

        if (display[colIdx] === '-' && !columns[colIdx].control && columns[colIdx].minWidth) {
          // Once we've found a column that won't fit we don't let any
          // others display either, or columns might disappear in the
          // middle of the table
          if (empty || usedWidth - columns[colIdx].minWidth < 0) {
            empty = true;
            display[colIdx] = false;
          } else {
            display[colIdx] = true;
          }

          usedWidth -= columns[colIdx].minWidth;
        }
      }

      // Determine if the 'control' column should be shown (if there is one).
      // This is the case when there is a hidden column (that is not the
      // control column). The two loops look inefficient here, but they are
      // trivial and will fly through. We need to know the outcome from the
      // first , before the action in the second can be taken
      var showControl = false;

      for (i = 0, ien = columns.length; i < ien; i++) {
        if (!columns[i].control && !columns[i].never && display[i] === false) {
          showControl = true;
          break;
        }
      }

      for (i = 0, ien = columns.length; i < ien; i++) {
        if (columns[i].control) {
          display[i] = showControl;
        }

        // Replace not visible string with false from the control column detection above
        if (display[i] === 'not-visible') {
          display[i] = false;
        }
      }

      // Finally we need to make sure that there is at least one column that
      // is visible
      if ($.inArray(true, display) === -1) {
        display[0] = true;
      }

      return display;
    },


    /**
     * Create the internal `columns` array with information about the columns
     * for the table. This includes determining which breakpoints the column
     * will appear in, based upon class names in the column, which makes up the
     * vast majority of this method.
     *
     * @private
     */
    _classLogic: function () {
      var that = this;
      var calc = {};
      var breakpoints = this.c.breakpoints;
      var dt = this.s.dt;
      var columns = dt.columns().eq(0).map(function (i) {
        var column = this.column(i);
        var className = column.header().className;
        var priority = dt.settings()[0].aoColumns[i].responsivePriority;
        var dataPriority = column.header().getAttribute('data-priority');

        if (priority === undefined) {
          priority = dataPriority === undefined || dataPriority === null ?
            10000 :
            dataPriority * 1;
        }

        return {
          className: className,
          includeIn: [],
          auto: false,
          control: false,
          never: className.match(/\bnever\b/) ? true : false,
          priority: priority
        };
      });

      // Simply add a breakpoint to `includeIn` array, ensuring that there are
      // no duplicates
      var add = function (colIdx, name) {
        var includeIn = columns[colIdx].includeIn;

        if ($.inArray(name, includeIn) === -1) {
          includeIn.push(name);
        }
      };

      var column = function (colIdx, name, operator, matched) {
        var size, i, ien;

        if (!operator) {
          columns[colIdx].includeIn.push(name);
        } else if (operator === 'max-') {
          // Add this breakpoint and all smaller
          size = that._find(name).width;

          for (i = 0, ien = breakpoints.length; i < ien; i++) {
            if (breakpoints[i].width <= size) {
              add(colIdx, breakpoints[i].name);
            }
          }
        } else if (operator === 'min-') {
          // Add this breakpoint and all larger
          size = that._find(name).width;

          for (i = 0, ien = breakpoints.length; i < ien; i++) {
            if (breakpoints[i].width >= size) {
              add(colIdx, breakpoints[i].name);
            }
          }
        } else if (operator === 'not-') {
          // Add all but this breakpoint
          for (i = 0, ien = breakpoints.length; i < ien; i++) {
            if (breakpoints[i].name.indexOf(matched) === -1) {
              add(colIdx, breakpoints[i].name);
            }
          }
        }
      };

      // Loop over each column and determine if it has a responsive control
      // class
      columns.each(function (col, i) {
        var classNames = col.className.split(' ');
        var hasClass = false;

        // Split the class name up so multiple rules can be applied if needed
        for (var k = 0, ken = classNames.length; k < ken; k++) {
          var className = classNames[k].trim();

          if (className === 'all') {
            // Include in all
            hasClass = true;
            col.includeIn = $.map(breakpoints, function (a) {
              return a.name;
            });
            return;
          } else if (className === 'none' || col.never) {
            // Include in none (default) and no auto
            hasClass = true;
            return;
          } else if (className === 'control' || className === 'dtr-control') {
            // Special column that is only visible, when one of the other
            // columns is hidden. This is used for the details control
            hasClass = true;
            col.control = true;
            return;
          }

          $.each(breakpoints, function (j, breakpoint) {
            // Does this column have a class that matches this breakpoint?
            var brokenPoint = breakpoint.name.split('-');
            var re = new RegExp('(min\\-|max\\-|not\\-)?(' + brokenPoint[0] + ')(\\-[_a-zA-Z0-9])?');
            var match = className.match(re);

            if (match) {
              hasClass = true;

              if (match[2] === brokenPoint[0] && match[3] === '-' + brokenPoint[1]) {
                // Class name matches breakpoint name fully
                column(i, breakpoint.name, match[1], match[2] + match[3]);
              } else if (match[2] === brokenPoint[0] && !match[3]) {
                // Class name matched primary breakpoint name with no qualifier
                column(i, breakpoint.name, match[1], match[2]);
              }
            }
          });
        }

        // If there was no control class, then automatic sizing is used
        if (!hasClass) {
          col.auto = true;
        }
      });

      this.s.columns = columns;
    },

    /**
     * Update the cells to show the correct control class / button
     * @private
     */
    _controlClass: function () {
      if (this.c.details.type === 'inline') {
        var dt = this.s.dt;
        var columnsVis = this.s.current;
        var firstVisible = $.inArray(true, columnsVis);

        // Remove from any cells which shouldn't have it
        dt.cells(
          null,
          function (idx) {
            return idx !== firstVisible;
          },
          {page: 'current'}
        )
          .nodes()
          .to$()
          .filter('.dtr-control')
          .removeClass('dtr-control');

        dt.cells(null, firstVisible, {page: 'current'})
          .nodes()
          .to$()
          .addClass('dtr-control');
      }
    },

    /**
     * Show the details for the child row
     *
     * @param  {DataTables.Api} row    API instance for the row
     * @param  {boolean}        update Update flag
     * @private
     */
    _detailsDisplay: function (row, update) {
      var that = this;
      var dt = this.s.dt;
      var details = this.c.details;

      if (details && details.type !== false) {
        var res = details.display(row, update, function () {
          return details.renderer(
            dt, row[0], that._detailsObj(row[0])
          );
        });

        if (res === true || res === false) {
          $(dt.table().node()).triggerHandler('responsive-display.dt', [dt, row, res, update]);
        }
      }
    },


    /**
     * Initialisation for the details handler
     *
     * @private
     */
    _detailsInit: function () {
      var that = this;
      var dt = this.s.dt;
      var details = this.c.details;

      // The inline type always uses the first child as the target
      if (details.type === 'inline') {
        details.target = 'td.dtr-control, th.dtr-control';
      }

      // Keyboard accessibility
      dt.on('draw.dtr', function () {
        that._tabIndexes();
      });
      that._tabIndexes(); // Initial draw has already happened

      $(dt.table().body()).on('keyup.dtr', 'td, th', function (e) {
        if (e.keyCode === 13 && $(this).data('dtr-keyboard')) {
          $(this).click();
        }
      });

      // type.target can be a string jQuery selector or a column index
      var target = details.target;
      var selector = typeof target === 'string' ? target : 'td, th';

      if (target !== undefined || target !== null) {
        // Click handler to show / hide the details rows when they are available
        $(dt.table().body())
          .on('click.dtr mousedown.dtr mouseup.dtr', selector, function (e) {
            // If the table is not collapsed (i.e. there is no hidden columns)
            // then take no action
            if (!$(dt.table().node()).hasClass('collapsed')) {
              return;
            }

            // Check that the row is actually a DataTable's controlled node
            if ($.inArray($(this).closest('tr').get(0), dt.rows().nodes().toArray()) === -1) {
              return;
            }

            // For column index, we determine if we should act or not in the
            // handler - otherwise it is already okay
            if (typeof target === 'number') {
              var targetIdx = target < 0 ?
                dt.columns().eq(0).length + target :
                target;

              if (dt.cell(this).index().column !== targetIdx) {
                return;
              }
            }

            // $().closest() includes itself in its check
            var row = dt.row($(this).closest('tr'));

            // Check event type to do an action
            if (e.type === 'click') {
              // The renderer is given as a function so the caller can execute it
              // only when they need (i.e. if hiding there is no point is running
              // the renderer)
              that._detailsDisplay(row, false);
            } else if (e.type === 'mousedown') {
              // For mouse users, prevent the focus ring from showing
              $(this).css('outline', 'none');
            } else if (e.type === 'mouseup') {
              // And then re-allow at the end of the click
              $(this).trigger('blur').css('outline', '');
            }
          });
      }
    },


    /**
     * Get the details to pass to a renderer for a row
     * @param  {int} rowIdx Row index
     * @private
     */
    _detailsObj: function (rowIdx) {
      var that = this;
      var dt = this.s.dt;

      return $.map(this.s.columns, function (col, i) {
        // Never and control columns should not be passed to the renderer
        if (col.never || col.control) {
          return;
        }

        var dtCol = dt.settings()[0].aoColumns[i];

        return {
          className: dtCol.sClass,
          columnIndex: i,
          data: dt.cell(rowIdx, i).render(that.c.orthogonal),
          hidden: dt.column(i).visible() && !that.s.current[i],
          rowIndex: rowIdx,
          title: dtCol.sTitle !== null ?
            dtCol.sTitle :
            $(dt.column(i).header()).text()
        };
      });
    },


    /**
     * Find a breakpoint object from a name
     *
     * @param  {string} name Breakpoint name to find
     * @return {object}      Breakpoint description object
     * @private
     */
    _find: function (name) {
      var breakpoints = this.c.breakpoints;

      for (var i = 0, ien = breakpoints.length; i < ien; i++) {
        if (breakpoints[i].name === name) {
          return breakpoints[i];
        }
      }
    },


    /**
     * Re-create the contents of the child rows as the display has changed in
     * some way.
     *
     * @private
     */
    _redrawChildren: function () {
      var that = this;
      var dt = this.s.dt;

      dt.rows({page: 'current'}).iterator('row', function (settings, idx) {
        var row = dt.row(idx);

        that._detailsDisplay(dt.row(idx), true);
      });
    },


    /**
     * Alter the table display for a resized viewport. This involves first
     * determining what breakpoint the window currently is in, getting the
     * column visibilities to apply and then setting them.
     *
     * @param  {boolean} forceRedraw Force a redraw
     * @private
     */
    _resize: function (forceRedraw) {
      var that = this;
      var dt = this.s.dt;
      var width = $(window).innerWidth();
      var breakpoints = this.c.breakpoints;
      var breakpoint = breakpoints[0].name;
      var columns = this.s.columns;
      var i, ien;
      var oldVis = this.s.current.slice();

      // Determine what breakpoint we are currently at
      for (i = breakpoints.length - 1; i >= 0; i--) {
        if (width <= breakpoints[i].width) {
          breakpoint = breakpoints[i].name;
          break;
        }
      }

      // Show the columns for that break point
      var columnsVis = this._columnsVisiblity(breakpoint);
      this.s.current = columnsVis;

      // Set the class before the column visibility is changed so event
      // listeners know what the state is. Need to determine if there are
      // any columns that are not visible but can be shown
      var collapsedClass = false;

      for (i = 0, ien = columns.length; i < ien; i++) {
        if (columnsVis[i] === false && !columns[i].never && !columns[i].control && !dt.column(i).visible() === false) {
          collapsedClass = true;
          break;
        }
      }

      $(dt.table().node()).toggleClass('collapsed', collapsedClass);

      var changed = false;
      var visible = 0;

      dt.columns().eq(0).each(function (colIdx, i) {
        if (columnsVis[i] === true) {
          visible++;
        }

        if (forceRedraw || columnsVis[i] !== oldVis[i]) {
          changed = true;
          that._setColumnVis(colIdx, columnsVis[i]);
        }
      });

      if (changed) {
        this._redrawChildren();

        // Inform listeners of the change
        $(dt.table().node()).trigger('responsive-resize.dt', [dt, this.s.current]);

        // If no records, update the "No records" display element
        if (dt.page.info().recordsDisplay === 0) {
          $('td', dt.table().body()).eq(0).attr('colspan', visible);
        }
      }

      that._controlClass();
    },


    /**
     * Determine the width of each column in the table so the auto column hiding
     * has that information to work with. This method is never going to be 100%
     * perfect since column widths can change slightly per page, but without
     * seriously compromising performance this is quite effective.
     *
     * @private
     */
    _resizeAuto: function () {
      var dt = this.s.dt;
      var columns = this.s.columns;

      // Are we allowed to do auto sizing?
      if (!this.c.auto) {
        return;
      }

      // Are there any columns that actually need auto-sizing, or do they all
      // have classes defined
      if ($.inArray(true, $.map(columns, function (c) {
        return c.auto;
      })) === -1) {
        return;
      }

      // Need to restore all children. They will be reinstated by a re-render
      if (!$.isEmptyObject(_childNodeStore)) {
        $.each(_childNodeStore, function (key) {
          var idx = key.split('-');

          _childNodesRestore(dt, idx[0] * 1, idx[1] * 1);
        });
      }

      // Clone the table with the current data in it
      var tableWidth = dt.table().node().offsetWidth;
      var columnWidths = dt.columns;
      var clonedTable = dt.table().node().cloneNode(false);
      var clonedHeader = $(dt.table().header().cloneNode(false)).appendTo(clonedTable);
      var clonedBody = $(dt.table().body()).clone(false, false).empty().appendTo(clonedTable); // use jQuery because of IE8

      clonedTable.style.width = 'auto';

      // Header
      var headerCells = dt.columns()
        .header()
        .filter(function (idx) {
          return dt.column(idx).visible();
        })
        .to$()
        .clone(false)
        .css('display', 'table-cell')
        .css('width', 'auto')
        .css('min-width', 0);

      // Body rows - we don't need to take account of DataTables' column
      // visibility since we implement our own here (hence the `display` set)
      $(clonedBody)
        .append($(dt.rows({page: 'current'}).nodes()).clone(false))
        .find('th, td').css('display', '');

      // Footer
      var footer = dt.table().footer();
      if (footer) {
        var clonedFooter = $(footer.cloneNode(false)).appendTo(clonedTable);
        var footerCells = dt.columns()
          .footer()
          .filter(function (idx) {
            return dt.column(idx).visible();
          })
          .to$()
          .clone(false)
          .css('display', 'table-cell');

        $('<tr/>')
          .append(footerCells)
          .appendTo(clonedFooter);
      }

      $('<tr/>')
        .append(headerCells)
        .appendTo(clonedHeader);

      // In the inline case extra padding is applied to the first column to
      // give space for the show / hide icon. We need to use this in the
      // calculation
      if (this.c.details.type === 'inline') {
        $(clonedTable).addClass('dtr-inline collapsed');
      }

      // It is unsafe to insert elements with the same name into the DOM
      // multiple times. For example, cloning and inserting a checked radio
      // clears the chcecked state of the original radio.
      $(clonedTable).find('[name]').removeAttr('name');

      // A position absolute table would take the table out of the flow of
      // our container element, bypassing the height and width (Scroller)
      $(clonedTable).css('position', 'relative')

      var inserted = $('<div/>')
        .css({
          width: 1,
          height: 1,
          overflow: 'hidden',
          clear: 'both'
        })
        .append(clonedTable);

      inserted.insertBefore(dt.table().node());

      // The cloned header now contains the smallest that each column can be
      headerCells.each(function (i) {
        var idx = dt.column.index('fromVisible', i);
        columns[idx].minWidth = this.offsetWidth || 0;
      });

      inserted.remove();
    },

    /**
     * Get the state of the current hidden columns - controlled by Responsive only
     */
    _responsiveOnlyHidden: function () {
      var dt = this.s.dt;

      return $.map(this.s.current, function (v, i) {
        // If the column is hidden by DataTables then it can't be hidden by
        // Responsive!
        if (dt.column(i).visible() === false) {
          return true;
        }
        return v;
      });
    },

    /**
     * Set a column's visibility.
     *
     * We don't use DataTables' column visibility controls in order to ensure
     * that column visibility can Responsive can no-exist. Since only IE8+ is
     * supported (and all evergreen browsers of course) the control of the
     * display attribute works well.
     *
     * @param {integer} col      Column index
     * @param {boolean} showHide Show or hide (true or false)
     * @private
     */
    _setColumnVis: function (col, showHide) {
      var dt = this.s.dt;
      var display = showHide ? '' : 'none'; // empty string will remove the attr

      $(dt.column(col).header()).css('display', display);
      $(dt.column(col).footer()).css('display', display);
      dt.column(col).nodes().to$().css('display', display);

      // If the are child nodes stored, we might need to reinsert them
      if (!$.isEmptyObject(_childNodeStore)) {
        dt.cells(null, col).indexes().each(function (idx) {
          _childNodesRestore(dt, idx.row, idx.column);
        });
      }
    },


    /**
     * Update the cell tab indexes for keyboard accessibility. This is called on
     * every table draw - that is potentially inefficient, but also the least
     * complex option given that column visibility can change on the fly. Its a
     * shame user-focus was removed from CSS 3 UI, as it would have solved this
     * issue with a single CSS statement.
     *
     * @private
     */
    _tabIndexes: function () {
      var dt = this.s.dt;
      var cells = dt.cells({page: 'current'}).nodes().to$();
      var ctx = dt.settings()[0];
      var target = this.c.details.target;

      cells.filter('[data-dtr-keyboard]').removeData('[data-dtr-keyboard]');

      if (typeof target === 'number') {
        dt.cells(null, target, {page: 'current'}).nodes().to$()
          .attr('tabIndex', ctx.iTabIndex)
          .data('dtr-keyboard', 1);
      } else {
        // This is a bit of a hack - we need to limit the selected nodes to just
        // those of this table
        if (target === 'td:first-child, th:first-child') {
          target = '>td:first-child, >th:first-child';
        }

        $(target, dt.rows({page: 'current'}).nodes())
          .attr('tabIndex', ctx.iTabIndex)
          .data('dtr-keyboard', 1);
      }
    }
  });


  /**
   * List of default breakpoints. Each item in the array is an object with two
   * properties:
   *
   * * `name` - the breakpoint name.
   * * `width` - the breakpoint width
   *
   * @name Responsive.breakpoints
   * @static
   */
  Responsive.breakpoints = [
    {name: 'desktop', width: Infinity},
    {name: 'tablet-l', width: 1024},
    {name: 'tablet-p', width: 768},
    {name: 'mobile-l', width: 480},
    {name: 'mobile-p', width: 320}
  ];


  /**
   * Display methods - functions which define how the hidden data should be shown
   * in the table.
   *
   * @namespace
   * @name Responsive.defaults
   * @static
   */
  Responsive.display = {
    childRow: function (row, update, render) {
      if (update) {
        if ($(row.node()).hasClass('parent')) {
          row.child(render(), 'child').show();

          return true;
        }
      } else {
        if (!row.child.isShown()) {
          row.child(render(), 'child').show();
          $(row.node()).addClass('parent');

          return true;
        } else {
          row.child(false);
          $(row.node()).removeClass('parent');

          return false;
        }
      }
    },

    childRowImmediate: function (row, update, render) {
      if ((!update && row.child.isShown()) || !row.responsive.hasHidden()) {
        // User interaction and the row is show, or nothing to show
        row.child(false);
        $(row.node()).removeClass('parent');

        return false;
      } else {
        // Display
        row.child(render(), 'child').show();
        $(row.node()).addClass('parent');

        return true;
      }
    },

    // This is a wrapper so the modal options for Bootstrap and jQuery UI can
    // have options passed into them. This specific one doesn't need to be a
    // function but it is for consistency in the `modal` name
    modal: function (options) {
      return function (row, update, render) {
        if (!update) {
          // Show a modal
          var close = function () {
            modal.remove(); // will tidy events for us
            $(document).off('keypress.dtr');
          };

          var modal = $('<div class="dtr-modal"/>')
            .append($('<div class="dtr-modal-display"/>')
              .append($('<div class="dtr-modal-content"/>')
                .append(render())
              )
              .append($('<div class="dtr-modal-close">&times;</div>')
                .click(function () {
                  close();
                })
              )
            )
            .append($('<div class="dtr-modal-background"/>')
              .click(function () {
                close();
              })
            )
            .appendTo('body');

          $(document).on('keyup.dtr', function (e) {
            if (e.keyCode === 27) {
              e.stopPropagation();

              close();
            }
          });
        } else {
          $('div.dtr-modal-content')
            .empty()
            .append(render());
        }

        if (options && options.header) {
          $('div.dtr-modal-content').prepend(
            '<h2>' + options.header(row) + '</h2>'
          );
        }
      };
    }
  };


  var _childNodeStore = {};

  function _childNodes(dt, row, col) {
    var name = row + '-' + col;

    if (_childNodeStore[name]) {
      return _childNodeStore[name];
    }

    // https://jsperf.com/childnodes-array-slice-vs-loop
    var nodes = [];
    var children = dt.cell(row, col).node().childNodes;
    for (var i = 0, ien = children.length; i < ien; i++) {
      nodes.push(children[i]);
    }

    _childNodeStore[name] = nodes;

    return nodes;
  }

  function _childNodesRestore(dt, row, col) {
    var name = row + '-' + col;

    if (!_childNodeStore[name]) {
      return;
    }

    var node = dt.cell(row, col).node();
    var store = _childNodeStore[name];
    var parent = store[0].parentNode;
    var parentChildren = parent.childNodes;
    var a = [];

    for (var i = 0, ien = parentChildren.length; i < ien; i++) {
      a.push(parentChildren[i]);
    }

    for (var j = 0, jen = a.length; j < jen; j++) {
      node.appendChild(a[j]);
    }

    _childNodeStore[name] = undefined;
  }


  /**
   * Display methods - functions which define how the hidden data should be shown
   * in the table.
   *
   * @namespace
   * @name Responsive.defaults
   * @static
   */
  Responsive.renderer = {
    listHiddenNodes: function () {
      return function (api, rowIdx, columns) {
        var ul = $('<ul data-dtr-index="' + rowIdx + '" class="dtr-details"/>');
        var found = false;

        var data = $.each(columns, function (i, col) {
          if (col.hidden) {
            var klass = col.className ?
              'class="' + col.className + '"' :
              '';

            $(
              '<li ' + klass + ' data-dtr-index="' + col.columnIndex + '" data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
              '<span class="dtr-title">' +
              col.title +
              '</span> ' +
              '</li>'
            )
              .append($('<span class="dtr-data"/>').append(_childNodes(api, col.rowIndex, col.columnIndex)))// api.cell( col.rowIndex, col.columnIndex ).node().childNodes ) )
              .appendTo(ul);

            found = true;
          }
        });

        return found ?
          ul :
          false;
      };
    },

    listHidden: function () {
      return function (api, rowIdx, columns) {
        var data = $.map(columns, function (col) {
          var klass = col.className ?
            'class="' + col.className + '"' :
            '';

          return col.hidden ?
            '<li ' + klass + ' data-dtr-index="' + col.columnIndex + '" data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
            '<span class="dtr-title">' +
            col.title +
            '</span> ' +
            '<span class="dtr-data">' +
            col.data +
            '</span>' +
            '</li>' :
            '';
        }).join('');

        return data ?
          $('<ul data-dtr-index="' + rowIdx + '" class="dtr-details"/>').append(data) :
          false;
      }
    },

    tableAll: function (options) {
      options = $.extend({
        tableClass: ''
      }, options);

      return function (api, rowIdx, columns) {
        var data = $.map(columns, function (col) {
          var klass = col.className ?
            'class="' + col.className + '"' :
            '';

          return '<tr ' + klass + ' data-dt-row="' + col.rowIndex + '" data-dt-column="' + col.columnIndex + '">' +
            '<td>' + col.title + ':' + '</td> ' +
            '<td>' + col.data + '</td>' +
            '</tr>';
        }).join('');

        return $('<table class="' + options.tableClass + ' dtr-details" width="100%"/>').append(data);
      }
    }
  };

  /**
   * Responsive default settings for initialisation
   *
   * @namespace
   * @name Responsive.defaults
   * @static
   */
  Responsive.defaults = {
    /**
     * List of breakpoints for the instance. Note that this means that each
     * instance can have its own breakpoints. Additionally, the breakpoints
     * cannot be changed once an instance has been creased.
     *
     * @type {Array}
     * @default Takes the value of `Responsive.breakpoints`
     */
    breakpoints: Responsive.breakpoints,

    /**
     * Enable / disable auto hiding calculations. It can help to increase
     * performance slightly if you disable this option, but all columns would
     * need to have breakpoint classes assigned to them
     *
     * @type {Boolean}
     * @default  `true`
     */
    auto: true,

    /**
     * Details control. If given as a string value, the `type` property of the
     * default object is set to that value, and the defaults used for the rest
     * of the object - this is for ease of implementation.
     *
     * The object consists of the following properties:
     *
     * * `display` - A function that is used to show and hide the hidden details
     * * `renderer` - function that is called for display of the child row data.
     *   The default function will show the data from the hidden columns
     * * `target` - Used as the selector for what objects to attach the child
     *   open / close to
     * * `type` - `false` to disable the details display, `inline` or `column`
     *   for the two control types
     *
     * @type {Object|string}
     */
    details: {
      display: Responsive.display.childRow,

      renderer: Responsive.renderer.listHidden(),

      target: 0,

      type: 'inline'
    },

    /**
     * Orthogonal data request option. This is used to define the data type
     * requested when Responsive gets the data to show in the child row.
     *
     * @type {String}
     */
    orthogonal: 'display'
  };


  /*
   * API
   */
  var Api = $.fn.dataTable.Api;

// Doesn't do anything - work around for a bug in DT... Not documented
  Api.register('responsive()', function () {
    return this;
  });

  Api.register('responsive.index()', function (li) {
    li = $(li);

    return {
      column: li.data('dtr-index'),
      row: li.parent().data('dtr-index')
    };
  });

  Api.register('responsive.rebuild()', function () {
    return this.iterator('table', function (ctx) {
      if (ctx._responsive) {
        ctx._responsive._classLogic();
      }
    });
  });

  Api.register('responsive.recalc()', function () {
    return this.iterator('table', function (ctx) {
      if (ctx._responsive) {
        ctx._responsive._resizeAuto();
        ctx._responsive._resize();
      }
    });
  });

  Api.register('responsive.hasHidden()', function () {
    var ctx = this.context[0];

    return ctx._responsive ?
      $.inArray(false, ctx._responsive._responsiveOnlyHidden()) !== -1 :
      false;
  });

  Api.registerPlural('columns().responsiveHidden()', 'column().responsiveHidden()', function () {
    return this.iterator('column', function (settings, column) {
      return settings._responsive ?
        settings._responsive._responsiveOnlyHidden()[column] :
        false;
    }, 1);
  });


  /**
   * Version information
   *
   * @name Responsive.version
   * @static
   */
  Responsive.version = '2.2.7';


  $.fn.dataTable.Responsive = Responsive;
  $.fn.DataTable.Responsive = Responsive;

// Attach a listener to the document which listens for DataTables initialisation
// events so we can automatically initialise
  $(document).on('preInit.dt.dtr', function (e, settings, json) {
    if (e.namespace !== 'dt') {
      return;
    }

    if ($(settings.nTable).hasClass('responsive') ||
      $(settings.nTable).hasClass('dt-responsive') ||
      settings.oInit.responsive ||
      DataTable.defaults.responsive
    ) {
      var init = settings.oInit.responsive;

      if (init !== false) {
        new Responsive(settings, $.isPlainObject(init) ? init : {});
      }
    }
  });


  return Responsive;
}));
